<script setup name="orderPay">
import { reactive, ref, inject } from 'vue';
import { showToast, showDialog, showLoadingToast, closeToast, showImagePreview } from 'vant';
import { getUrlParam, webRequestPayment, navigateTo, isIOS } from '@/utils';
import setPageTitle from '@/utils/set-page-title';
import { CreateRemark, CustomerRecord } from '../components';
import store from '@/utils/store';
import useThrottle from '@/utils/useThrottle';
import api from '@/api';
const $logger = inject('logger');

import defaultUser from '@/assets/images/default-user.png';
import defaultGood from '@/assets/images/default-good.png';

const props = defineProps({
    merchantNo: {
        type: String,
        value: ''
    }
});

const state = reactive({
    isLoading: true,
    showList: false,
    needAddress: false, // 是否显示地址
    hasGoods: false, // 是否有商品
    customCommodityList: [], // 商品列表
    showPopup: false, //  显示备注popup
    buyRemark: '', // 输入备注
    remark: '', // 显示备注
    userAvatar: defaultUser, // 默认头像
    payMoney: '', // 支付金额
    sellerInfo: null, // 卖家信息
    h5PayMerchantNo: props.merchantNo, // H5 对应商户号
    errorCode: 0, // 错误码场景
    showGuide: true,
    isSubmit: false,
    showRegion: false,
    userReceiveAddress: {
        receiveAddressId: ''
    },
    errorInfo: null,
    showCustomerRecord: false,
    customerInfo: {},
    relayId: '',
});
const errActiveId = ref('');
const inputRefs = ref([]);

// 获取开单收款信息
const getGroupInfo = async (callback) => {
    const relayId = getUrlParam('relayId');
    const turId = getUrlParam('turId');
    store.set('PAGE_ID', '10003'); // 设置页面ID
    state.relayId = relayId;
    try {
        const res = await api.fetchGet('getRelayInfo', { relayId, turId }, { hasErr: true });
        const { code, data, message } = res || {};
        state.isLoading = false;
        if (code === 0) {
            const {
                collectInfo,
                needAddress,
                customColumns,
                content,
                imageList,
                backgroundImage,
                amount,
                payCount,
                lastPayTime,
                buyerImageHerderList
            } = data;
            const { sellerInfo, sellerTeamId, userReceiveAddress = {} } = collectInfo;
            let addressList = [];
            // 组装地址
            if (needAddress) {
                addressList = [
                    {
                        columnId: 'address_name',
                        name: '收货人',
                        value: userReceiveAddress.name || '',
                        focus: false,
                        type: 'text',
                        placeholder: '收货人姓名',
                        maxlength: 30
                    },
                    {
                        columnId: 'address_phone',
                        name: '手机号码',
                        value: userReceiveAddress.phone || '',
                        focus: false,
                        placeholder: '手机号码',
                        maxlength: 11,
                        type: 'tel'
                    },
                    {
                        columnId: 'address_area',
                        name: '所在地区',
                        value: userReceiveAddress.province
                            ? userReceiveAddress.province +
                              userReceiveAddress.city +
                              userReceiveAddress.area
                            : '',
                        focus: false,
                        readonly: true,
                        isLink: true,
                        type: 'text',
                        click: () => {
                            state.showRegion = true;
                        },
                        placeholder: '省/市/区'
                    },
                    {
                        columnId: 'address_detail',
                        name: '详细地址',
                        type: 'textarea',
                        value: userReceiveAddress.detail || '',
                        focus: false,
                        rows: 2,
                        placeholder: '街道门牌信息',
                        maxlength: 60
                    }
                ];
            }

            const curCustomList = customColumns
                .filter((item) => item.selectStatus)
                .map((item) => {
                    return {
                        columnId: item.columnId,
                        name: item.name,
                        value: '',
                        focus: false,
                        maxlength: 32
                    };
                });

            addressList.concat(curCustomList);
            state.activeBgImg = backgroundImage;
            state.sellerInfo = sellerInfo;
            state.userAvatar = sellerInfo.sellerHeader
                ? `${sellerInfo.sellerHeader}?imageMogr2/thumbnail/192x192`
                : defaultUser;
            state.sellerName = sellerInfo.sellerName;
            state.sellerTeamId = sellerTeamId;
            state.needAddress = needAddress;
            state.userReceiveAddress = userReceiveAddress || {};
            state.customColumns = addressList.concat(curCustomList);
            state.content = content;
            state.imageList = imageList;
            state.backgroundImage = backgroundImage;
            state.payMoney = amount;
            state.payCount = payCount;
            state.lastPayTime = lastPayTime;
            state.buyerImageHerderList = buyerImageHerderList;
            state.hasActivity = content || imageList.length > 0;

            if (content || imageList.length > 0) {
                setPageTitle('接龙下单');
            }
            // 商户收款功能已被关闭，无法付款
            if (sellerInfo && sellerInfo.prohibitedPay) {
                showDialog({
                    title: '商户收款功能已被关闭，无法付款',
                    confirmButtonText: '关闭'
                });
            }
            typeof callback === 'function' && callback();
        } else if (code === 4005030 || code === 4005016) {
            // 4005030 无法访问，接龙功能已关闭
            // 4005016 该接龙活动被封禁
            state.errorInfo = {
                iconName: 'error',
                iconColor: '#FE4444',
                title: message,
                infoText: '商家因违反相关用户协议，接龙已被关闭'
            };
        } else if (code === 4005017) {
            // 商家已暂停接龙
            state.errorInfo = {
                iconName: 'info1',
                iconColor: '#F1B000',
                title: message,
                infoText: '如有疑问，请联系商家开启接龙'
            };
        } else if (code === 4005019) {
            // 该活动已被删除
            state.errorInfo = {
                iconName: 'trash',
                iconColor: '#DDDDDD',
                title: message,
                infoText: '如有疑问，请联系商家'
            };
        } else if (code === 4009016) {
            // MA绑定异常
            state.errorInfo = {
                iconName: 'info1',
                iconColor: '#007AFF',
                title: message,
                infoText: '请通知商家联系生意云客服'
            };
        } else if (code === 4005031) {
            // 功能维护中
            state.errorInfo = {
                iconName: 'setting1',
                iconColor: '#007AFF',
                title: message,
                infoText: '如有疑问请通知商家联系在线客服'
            };
        } else if (code === 4005018 || code === 4005022) {
            // 员工离职，链接已失效
            state.errorInfo = {
                iconName: 'info1',
                iconColor: '#007AFF',
                title: message,
                infoText: '链接对应员工已离职，请通知商家重新分享活动链接'
            };
        } else {
            showToast(message);
        }
    } catch (err) {
        state.isLoading = false;
        console.log(err);
        showToast('获取接龙信息失败');
        $logger.error(err, {
            pageId: 10003,
            moduleCode: 'ORDER',
            tag: 'getRelayInfo接口异常',
            uri: 'order/relay/pay/getRelayInfo'
        });
    }
};

/**
 * 点支付按钮未授权，授权后回来直接拉起支付
 */
const authBackAction = () => {
    getGroupInfo(() => {
        const detail = store.get('DETAIL_INFO');
        if (detail) {
            state.remark = detail.remark;
            state.userReceiveAddress = detail.userReceiveAddress;
            state.customColumns = detail.customColumns;
            store.remove('DETAIL_INFO');
        }
        handleConfirmKey();
    });
};

/**
 * 点击支付
 */
const handleConfirmKey = async () => {
    const turId = getUrlParam('turId');
    const relayId = getUrlParam('relayId');
    const { payMoney, remark, userReceiveAddress, customColumns, sellerInfo } = state;

    // 商户收款功能已被关闭，无法付款
    if (sellerInfo && sellerInfo.prohibitedPay) {
        showDialog({
            title: '商户收款功能已被关闭，无法付款',
            confirmButtonText: '关闭'
        });
        return;
    }

    // 防止多次点击
    if (state.isSubmit) {
        return;
    }
    state.isSubmit = true;

    // 校验自定义字段是否都填入内容
    const filterList = customColumns.filter((item) => !item.value);
    if (filterList.length) {
        const curId = filterList[0].columnId;

        const input = inputRefs.value[curId];
        if (input) {
            if (curId === 'address_area') {
                state.showRegion = true;
            } else {
                input.focus();
            }
        }

        errActiveId.value = curId;
        setTimeout(() => {
            errActiveId.value = '';
        }, 1600);

        const element = document.getElementById(`err_${curId}`);
        const rect = element.getBoundingClientRect();

        if (rect) {
            const scrollTop = rect.top;
            window.scrollTo({
                top: scrollTop,
                behavior: 'smooth' // 平滑滚动效果
            });
        }
        state.isSubmit = false;
        return;
    }

    // 校验地址
    let receiveAddressId = '';
    if (state.needAddress) {
        receiveAddressId = await saveBuyerAddress(); // 保存、更新地址
        if (!receiveAddressId) {
            state.isSubmit = false;
            return;
        }
    }
    // 自定义参数
    const curItem = customColumns.slice(4).map((item) => ({
        columnId: item.columnId,
        name: item.name,
        value: item.value
    }));

    const { userStatus, openId } = store.get('USERINFO');
    if (userStatus !== 'AUTHED') {
        store.set('DETAIL_INFO', { remark, userReceiveAddress, customColumns });
        navigateTo('/auth');
        state.isSubmit = false;
        return;
    }

    const param = {
        relayId,
        turId,
        remark,
        remarkList: [],
        amount: payMoney,
        receiveAddressId,
        openId,
        h5PayMerchantNo: state.h5PayMerchantNo,
        customColumns: curItem
    };

    createOrder(param);
};

// 保存买家地址
const saveBuyerAddress = async () => {
    try {
        state.userReceiveAddress.name = state.customColumns[0].value;
        state.userReceiveAddress.phone = state.customColumns[1].value;
        state.userReceiveAddress.detail = state.customColumns[3].value;
        const res = await api.fetchPost('saveAddress', state.userReceiveAddress, {
            hasErr: true,
            isLoading: false
        });
        const { code, message, data } = res;
        if (code !== 0) {
            showToast(message);
            return '';
        }
        state.userReceiveAddress.receiveAddressId = data;
        return data;
    } catch (err) {
        console.log(err);
        return '';
    }
};

// 创建订单
const createOrder = useThrottle(async (param) => {
    showLoadingToast({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner'
    });
    try {
        const res = await api.fetchPost('createRelayPayOrder', param, { hasErr: true });
        const { code, message, data } = res;
        if (code === 0) {
            const { orderId } = data;
            requestPayment({
                orderId,
                turId: param.turId,
                h5PayMerchantNo: state.h5PayMerchantNo
            });
        } else {
            state.isSubmit = false;
            closeToast();
            if (code === 4005004 || code === 4005005) {
                // 4005004,"商家未开通支付宝收款，请使用微信扫码"
                // 4005005,"商户收款功能已被关闭，无法付款"
                showDialog({
                    title: message,
                    confirmButtonText: '关闭'
                });
            } else if (code === 4005006 || code === 4005007 || code === 4005012) {
                // 4005006,"你非当前商家客户，无法付款"
                // 4005007,"商户今日收款已达上限，请明天再试"
                // 4005012 超出该商户单笔可收款金额上限
                showDialog({
                    title: message,
                    confirmButtonText: '确定'
                });
            } else if (code === 4005008) {
                // 请通知商家完成商户认证
                showDialog({
                    title: message,
                    message: '根据国家法规要求，需要完成商户认证后方可收款',
                    confirmButtonText: '确认'
                });
            } else if (code === 4005009) {
                // 请通知商家申请微信商户号
                showDialog({
                    title: message,
                    message: '应监管要求，需申请微信商户号后可收款',
                    confirmButtonText: '确认'
                });
            } else if (code === 4005017 || code === 4005019) {
                // 4005017 商家已暂停接龙
                // 4005019 商家删除接龙
                showDialog({
                    title: message,
                    message: '如有疑问，请联系商家开启接龙',
                    confirmButtonText: '确认'
                });
            } else if (code === 4005023 || code === 4005024) {
                // 4005023 无法访问
                // 4005024 无法下单
                showDialog({
                    title: message,
                    message: '商家因违反相关用户协议，接龙已被关闭',
                    confirmButtonText: '确认'
                });
            } else if (code === 4005026) {
                // 功能维护中，暂不可用
                showDialog({
                    title: message,
                    message: '如有疑问请通知商家联系在线客服',
                    confirmButtonText: '确认'
                });
            } else {
                showToast(message);
            }
        }
    } catch (err) {
        state.isSubmit = false;
        console.log(err);
        showToast('创建支付单失败');
    }
}, 3000);

// 发起支付
const requestPayment = async (param) => {
    const res = await api.fetchPost('orderToPay', param, { hasErr: true });
    const { code, message, data } = res;
    if (code === 0) {
        store.remove('AUTH_TYPE');
        webRequestPayment(data);
        closeToast();
    } else if (code === 2002015 || code === 2002013 || code === 2002011) {
        closeToast();
        // 2002015 你非当前商家客户，无法付款
        // 2002013 商家收款已关闭
        // 2002011 该商家当日收款已达上限
        showDialog({
            title: message,
            confirmButtonText: '确定'
        });
    } else if (code === 2002016) {
        // 收款码已失效
        state.errorInfo = {
            iconName: 'error',
            iconColor: '#F1B000',
            title: message,
            infoText: '请通知商家重新生成付款链接'
        };
    } else {
        showToast(message);
    }
    state.isSubmit = false;
};

const onRemarkClose = () => {
    state.showRemarkPopup = false;
};

const onRemarkChange = (value) => {
    state.showRemarkPopup = false;
    state.remark = value;
};

const onAddRemark = () => {
    state.showRemarkPopup = true;
};

const onRegionClose = () => {
    state.showRegion = false;
};

const onRegionConfirm = (value) => {
    const [province, city, area] = value;
    state.userReceiveAddress = {
        ...state.userReceiveAddress,
        province,
        city,
        area
    };
    const curValue = state.customColumns.find((item) => item.columnId === 'address_area');
    if (curValue) {
        curValue.value = `${province}${city}${area}`;
    }
    state.showRegion = false;
};

const handleGroupCustomer = async () => {
    state.showCustomerRecord = true;
};

// 预览图片
const onPreviewImage = (curImage) => {
    if (!curImage) return;
    const startPosition = state.imageList.findIndex((item) => item === curImage);
    showImagePreview({
        images: state.imageList,
        startPosition
    });
};

// 动态设置ref引用
const setInputRef = (el, id) => {
    if (el) {
        // 将元素按索引存入数组
        inputRefs.value[id] = el;
    }
};

// 点击键盘回车或下一项，ios适配点下一项没反应，以及点确认都不相应的问题
const handleKeydown = (e, index) => {
    console.log(e, index);
    if (e.key === 'Enter' || e.keyCode === 13) {
        if (state.customColumns.length - 1 === index) {
            e.preventDefault(); // 阻止默认行为（如换行）
            // 收起键盘（让输入框失焦）
            e.target.blur();
            return;
        }
        if (isIOS() && state.customColumns.length) {
            const curId = state.customColumns[index + 1].columnId;
            const input = inputRefs.value[curId];
            if (input) {
                if (curId === 'address_area') {
                    state.showRegion = true;
                } else {
                    input.focus();
                }
            }
        }
    }
};

defineExpose({ getGroupInfo, authBackAction, handleConfirmKey });
</script>

<template>
    <c-page :loading="state.isLoading">
        <c-result
            v-if="state.errorInfo"
            :padding-top="60"
            :icon-name="state.errorInfo.iconName"
            :icon-color="state.errorInfo.iconColor"
            :title="state.errorInfo.title"
            :info-text="state.errorInfo.infoText"
            :btn-type="state.errorInfo.btnType"
            :btn-name="state.errorInfo.buttonName"
        ></c-result>
        <div class="order-pay" v-if="!state.errorInfo && !state.hasActivity">
            <div class="user-info">
                <img class="header-img" :src="state.userAvatar" />
                <div class="seller-info">
                    <div class="name ellipsis-one">{{ state.sellerName }}</div>
                </div>
            </div>
            <div class="pay-content">
                <div class="input-section">
                    <div class="label"> 付款金额 </div>
                    <div class="input-box">
                        <c-price
                            :price="state.payMoney"
                            :unit-space="4"
                            :unit-size="28"
                            :size="44"
                            :is-wan="false"
                            :is-simple="false"
                        />
                    </div>
                </div>
                <div class="content-box">
                    <div
                        class="activity-info"
                        @click="handleGroupCustomer"
                        v-if="state.payCount > 0"
                    >
                        <div class="left-box">
                            <div
                                style="height: 20px"
                                v-for="(item, index) in state.buyerImageHerderList"
                                :key="index"
                            >
                                <img
                                    wx:if="{{index < 3}}"
                                    :src="
                                        !item || item === '/images/default-goods.png'
                                            ? defaultGood
                                            : item + '?imageMogr2/thumbnail/40x40'
                                    "
                                    class="buyer-img"
                                    :style="`z-index:${
                                        state.buyerImageHerderList.length - index - 1
                                    };margin-right: ${
                                        state.buyerImageHerderList.length - 1 > index
                                            ? '-10px'
                                            : '0'
                                    }`"
                                />
                            </div>
                            <div class="time">{{ state.lastPayTime }}</div>
                        </div>
                        <div class="right-box">
                            <div class="person-num">{{ state.payCount }}人已接龙</div>
                            <c-icon name="arrow" size="17" color="#F1B000" />
                        </div>
                    </div>
                    <div
                        class="customize-box"
                        v-if="state.needAddress || state.customColumns?.length"
                    >
                        <div class="label">请填写以下信息</div>
                        <div
                            :class="`cell-item ${
                                item.columnId === errActiveId ? 'cell-item-active-no' : ''
                            }`"
                            v-for="(item, index) in state.customColumns"
                            :key="index"
                            :id="`err_${item.columnId}`"
                        >
                            <div class="cell-label">{{ item.name }}</div>
                            <van-field
                                :ref="(el) => setInputRef(el, item.columnId)"
                                class="cell-input"
                                v-model="item.value"
                                :type="item.type || 'text'"
                                :maxlength="item.maxlength"
                                :readonly="item.readonly || false"
                                :is-link="item.isLink || false"
                                :placeholder="item.placeholder || '点击输入'"
                                :autofocus="item.focus"
                                :update:model-value="
                                    (item.value = item.value.replace(/[\r\n]/g, ''))
                                "
                                :enterkeyhint="
                                    isIOS()
                                        ? state.customColumns.length - 1 === index
                                            ? 'done'
                                            : 'next'
                                        : ''
                                "
                                rows="1"
                                autosize
                                @click="item.click"
                                @keydown="(e) => handleKeydown(e, index)"
                            />
                        </div>
                        <div class="remark-box">
                            <span v-if="state.remark" style="margin-right: 8px">{{
                                state.remark
                            }}</span>
                            <span class="add-remark" @click="onAddRemark">
                                {{ state.remark ? ' 修改备注' : '添加备注' }}
                            </span>
                        </div>
                    </div>
                    <div class="only-remark" v-else>
                        <div class="remark-box">
                            <span v-if="state.remark" style="margin-right: 8px">{{
                                state.remark
                            }}</span>
                            <span class="add-remark" @click="onAddRemark">
                                {{ state.remark ? ' 修改备注' : '添加备注' }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="footer-box">
                    <div class="key-confirm" @click.stop="handleConfirmKey"> 立即支付 </div>
                </div>
            </div>
        </div>
        <!-- 有活动 -->
        <div class="order-activity-pay" v-else-if="!state.errorInfo && state.hasActivity">
            <div class="bg-img">
                <img :src="state.activeBgImg" width="100%" height="180" class="poster" />
                <div class="mask-area"></div>
                <div class="header-box">
                    <img class="icon-avatar" :src="state.userAvatar" width="52" height="52" />
                    <div class="name ellipsis-one">{{ state.sellerName }}</div>
                </div>
            </div>

            <div class="content-box">
                <div class="activity-box">
                    <div class="label" v-if="state.content">{{ state.content }}</div>
                    <div
                        class="img-list"
                        :style="`padding-top: ${!state.content ? '16px' : '4px'}`"
                        v-if="state.imageList.length > 0"
                    >
                        <div
                            :class="`img-box ${
                                state.imageList.length > 3
                                    ? 'small-img-box'
                                    : state.imageList.length === 3
                                    ? 'middle-img-box'
                                    : ''
                            }`"
                            v-for="(item, index) in state.imageList"
                            :key="index"
                            @click="onPreviewImage(item)"
                        >
                            <img
                                class="icon-poster"
                                :src="
                                    !item
                                        ? defaultGood
                                        : `${item}?imageMogr2/thumbnail/${
                                              state.imageList.length > 3 ? '216x216' : '360x360'
                                          }/crop/${
                                              state.imageList.length > 3 ? '216x216' : '360x360'
                                          }/gravity/center`
                                "
                                :width="
                                    state.imageList.length > 3
                                        ? 72
                                        : state.imageList.length === 3
                                        ? 98
                                        : 120
                                "
                                :height="
                                    state.imageList.length > 3
                                        ? 72
                                        : state.imageList.length === 3
                                        ? 98
                                        : 120
                                "
                            />
                        </div>
                    </div>
                    <div
                        class="activity-info"
                        @click="handleGroupCustomer"
                        v-if="state.payCount > 0"
                    >
                        <div class="left-box">
                            <div
                                style="height: 20px"
                                v-for="(item, index) in state.buyerImageHerderList"
                                :key="index"
                            >
                                <img
                                    wx:if="{{index < 3}}"
                                    :src="
                                        !item || item === '/images/default-goods.png'
                                            ? defaultGood
                                            : item + '?imageMogr2/thumbnail/40x40'
                                    "
                                    class="buyer-img"
                                    :style="`z-index:${
                                        state.buyerImageHerderList.length - index - 1
                                    };margin-right: ${
                                        state.buyerImageHerderList.length - 1 > index
                                            ? '-10px'
                                            : '0'
                                    }`"
                                />
                            </div>
                            <div class="time">{{ state.lastPayTime }}</div>
                        </div>
                        <div class="right-box">
                            <div class="person-num">{{ state.payCount }}人已接龙</div>
                            <c-icon name="arrow" size="17" color="#F1B000" />
                        </div>
                    </div>
                    <div v-else style="height: 8px"></div>
                </div>
                <div class="customize-box" v-if="state.needAddress || state.customColumns?.length">
                    <div class="label">请填写以下信息</div>
                    <div
                        :class="`cell-item ${
                            item.columnId === errActiveId ? 'cell-item-active' : ''
                        }`"
                        v-for="(item, index) in state.customColumns"
                        :key="index"
                        :id="`err_${item.columnId}`"
                    >
                        <div class="cell-label">{{ item.name }}</div>
                        <van-field
                            :ref="(el) => setInputRef(el, item.columnId)"
                            class="cell-input"
                            v-model="item.value"
                            :type="item.type || 'text'"
                            :maxlength="item.maxlength"
                            :readonly="item.readonly || false"
                            :is-link="item.isLink || false"
                            :placeholder="item.placeholder || '点击输入'"
                            :update:model-value="(item.value = item.value.replace(/[\r\n]/g, ''))"
                            :autofocus="item.focus"
                            :enterkeyhint="
                                isIOS()
                                    ? state.customColumns.length - 1 === index
                                        ? 'done'
                                        : 'next'
                                    : ''
                            "
                            rows="1"
                            autosize
                            @click="item.click"
                            @keydown="(e) => handleKeydown(e, index)"
                        />
                    </div>
                    <div class="remark-box">
                        <span v-if="state.remark" style="margin-right: 8px">{{
                            state.remark
                        }}</span>
                        <span class="add-remark" @click="onAddRemark">
                            {{ state.remark ? ' 修改备注' : '添加备注' }}
                        </span>
                    </div>
                </div>
                <div class="only-remark" v-else>
                    <div class="remark-box">
                        <span v-if="state.remark" style="margin-right: 8px">{{
                            state.remark
                        }}</span>
                        <span class="add-remark" @click="onAddRemark">
                            {{ state.remark ? ' 修改备注' : '添加备注' }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="footer-box">
                <div class="price-box">
                    <c-price
                        :price="state.payMoney"
                        :unit-size="24"
                        :size="40"
                        :is-wan="false"
                        :is-simple="false"
                    />
                </div>
                <div class="key-confirm" @click.stop="handleConfirmKey"> 立即支付 </div>
            </div>
        </div>
    </c-page>
    <!-- 地址popup -->
    <CreateRemark
        :show="state.showRemarkPopup"
        :init-data="state.remark"
        @close="onRemarkClose"
        @change="onRemarkChange"
    ></CreateRemark>
    <!-- 客户接龙记录 -->
    <CustomerRecord title="客户接龙记录" v-model:show="state.showCustomerRecord" :order-id="state.relayId" type="group"></CustomerRecord>
    <c-region :show="state.showRegion" @close="onRegionClose" @confirm="onRegionConfirm"></c-region>
</template>

<style scoped lang="less">
@import './index.less';
</style>
